<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<style>

    .materials {
        font-size: 14px;
        font-weight: 300;
        width: 48%;
        float: left;
    }

    .materials:nth-of-type(1n) {
        margin-right: 2%;
    }

    .materials input {
        border: 1px solid #222;
        border-radius: 4px;
    }

    .choice{
        background: #FFFFFF none;
        border: 1px solid #e5e6e7;
        border-radius: 1px;
        padding: 6px 12px;
        box-sizing: border-box;
        font-size: 14px;
        height: 200px;
        overflow: auto;
        margin-left: 16px;
    }

</style>
<body class="gray-bg">
<div class="wrapper wrapper-content ">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <form class="form-horizontal m-t" id="signupForm">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">订单种类：</label>
                            <div class="col-sm-8">

                                <select id="orderTypes" name="orderTypes" placeholder="请选择订单种类"
                                        class="form-control">
                                    <option value="">请选择</option>
                                    <option value="0">学校</option>
                                    <option value="1">公司</option>
                                    <option value="2">个人</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">订单类别：</label>
                            <div class="col-sm-8">

                                <select id="bookId" name="bookId" placeholder="请选择类别" class="form-control">
                                    <option value="">请选择</option>
                                    <option th:each="item : ${list}" th:value="${item.name}"
                                            th:text="${item.name}"></option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group" id="multi">
                            <label class="col-sm-3 control-label"></label>
                            <div class="screen">

                            </div>
                            <input type="hidden" name="bookId" id="bookIdhide" value="">
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">订单数量：</label>
                            <div class="col-sm-8">
                                <input id="orderNumber" name="orderNumber" type="text" class="form-control"
                                       placeholder="请输入订单数量">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">年份：</label>
                            <div class="col-sm-8">
                                <select id="year" name="year" placeholder="请选择年份" class="form-control">
                                    <option value="2023">2023</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">部门：</label>
                            <div class="col-sm-8">
                                <select id="department" name="department" placeholder="请选择部门" class="form-control">
                                    <option value="行政综合部">行政综合部</option>
                                    <option value="院校事业部">院校事业部</option>
                                    <option value="品牌运营">品牌运营</option>
                                    <option value="招生招商">招生招商</option>
                                    <option value="教学">教学</option>
                                    <option value="总经办">总经办</option>
                                </select>
                            </div>
                        </div>
                        <div class="div_3" id="adre">
                            <div class="form-group">
                                <label class="col-sm-3 control-label">所属省份：</label>
                                <div class="col-sm-8">
                                    <select id="province" name="province" placeholder="province" class="form-control"
                                            type="text"></select>

                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">所属市：</label>
                                <div class="col-sm-8">
                                    <select id="city" name="city" placeholder="city" class="form-control"
                                            type="text"></select>

                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">所属县：</label>
                                <div class="col-sm-8">
                                    <select id="district" name="district" placeholder="county" class="form-control"
                                            type="text"></select>

                                </div>
                            </div>
                        </div>

                        <div>
                            <label class="col-sm-3 control-label">详细地址：</label>
                            <div class="col-sm-8">
                                <input id="address" name="address" placeholder="请输入详细地址" class="form-control"
                                       type="text">

                            </div>
                        </div>


                        <div class="form-group">
                            <label class="col-sm-3 control-label">收件人：</label>
                            <div class="col-sm-8">
                                <input id="addressee" name="addressee" placeholder="请输入收件人姓名"
                                       class="form-control" type="text">

                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">收件人电话：</label>
                            <div class="col-sm-8">
                                <input id="mobile" name="mobile" placeholder="收件人联系方式" class="form-control"
                                       type="text">

                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">备注：</label>
                            <div class="col-sm-8">
                                <textarea name="remarks" maxlength="250" style="height:300px" class="form-control" placeholder="请输入备注(最多输入200字)"></textarea>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">凭证上传：</label>
                            <div class="col-sm-8">
                                <button type="button" class="btn btn-success" id="btnUploadOrder">
                                    <i class="fa fa-cloud"></i>上传相关凭证
                                </button>
                                <input type="text" style="opacity:0;width: 1px;" id="dataUrl" name="dataUrl"/>
                                <div id="test"><img src="" alt="" width="200"></div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-sm-8 col-sm-offset-3">
                                <button type="submit" class="btn btn-primary">提交</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div th:include="include::footer"></div>
<script src="/js/jquery.citys.js"></script>
<script src="//s.xlongwei.com/res/js/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="/js/webJs/jzweb/extraOrder/add.js">
</script>
<script>
    $(function () {
        //获取用户信息
        //省市区联动
        $('#adre').citys({
            province: $("#province").val(),
            city: $("#city").val(),
            district: $("#district").val(),
            onChange: function (info) {
            }
        });

        $("#bookId").change(function (val) {

            $.ajax({
                url: '/jzweb/extraOrder/selectBookType',
                data: {type: val.target.value},
                post: 'post',
                success: function (res) {
                    if (res.code == 0) {
                        $(".choice").show();
                        var str = '';
                        if( res.data.length == 0){
                            $(".choice").hide();
                            return false;
                        }
                        res.data.forEach(function (item, index) {
                            str += `
                                        <label for="${item.id}" class="materials form-control">
                                            <input id="${item.id}" type="checkbox" data-index="${index}" value="${item.id}">
                                            ${item.bookType}
                                        </label>
                                    `
                        });
                        str = `<div class="choice col-sm-7">${str}</div>`
                        $(".screen").html(str);
                        str = '';

                        var n = [];
                        $(".screen").find('input').change(function (item){
                            if(item.target.checked){
                                n.push(item.target.value);
                            }else{
                                n.forEach(function (items,i){
                                    if( item.target.value == items ){
                                        return n.splice(i,1)
                                    }
                                })
                            }
                            console.log(n);
                            str = n.join();
                            $("#bookIdhide").val(str);
                        })

                    }
                },
                error: function (err) {
                    console.log('下拉回调接口错误信息', err)
                }
            })

        })



    });

</script>
</body>
</html>
